How to create Animated GIFs


This week's Home Improvements looks at how to create your own Animated GIFs.

Having your own Animated GIFs will give your webpage a boost and help it set itself appart from all those pages that rely on graphics found on the net. Having to see the same graphics over and over again can be a little boring, so show your visitors something new. Here is how to do it:



Background

There are two main types of graphical file format, bitmaps and vector graphics. Since animated GIF's are bitmaps, we are only going to be dealing dealing with that format. A bitmap is an image that is formed from dots of colour (pixels), on a VGA resolution there are 640 pixels by 480 pixels which make up the image on your screen.

In order to store the data for the image on a disk there has to be a certain format that it is in that the computer understands, and unfortunately on a PC there are quite a lot of different ones and you need to be aware of this. The two most used for web pages are JPEG and GIF. A GIF allows you up to 256 colours but you can specify fewer colours in order to decrease the size of your file, whereas a JPEG is photographic quality allowing 64,000 colours. For internet animation the standard format to animate on is GIF to produce such things as scrolling banners and small animation touches.
Making The Animated GIF

All animations are made using frames, using the same principle as a flickbook. So in order to make your animation you are going to decide how many frames to have and what to have in each frame. As we are dealing with the internet the things that we are going to need to think about is download time, which depends on the size of the file being downloaded (I bet you've all had to wait 10 minutes the the graphics of a site to download).

The things that will affect the size of your GIF file are:

  1. The actual physical size of the picture on the screen, the bigger the picture, the greater the number of dots and therefore the larger the file.
  2. The number of frames in your animation as each one of these is a seperate GIF.
  3. The number of colours specified in the GIF file.
As with all things computing you have to balance these three factors against each other.

Once you have decided how many colours, how big and the contents of each frame we then have to create the frames using a bitmap editor, such as Paintbrush which comes free with windows, Paint Shop Pro which is shareware or commercial packages such as Photopaint, Photostyler, Photodesk and many others. Each frame of animation must be produced and saved to disk each as a seperate GIF. Mostly it is easier to produce the next frame by editing the previous one, please make sure that when saving the edited frame you click the "Save As" button giving it a new name so as not to overwrite the previous frame.
Compiling Into An Animated GIF
or this you need a GIF animation package the one that I use is, "The GIF Construction Set" by Alchemy Mindworks which can be found here: "http://www.mindworkshop.com/alchemy/alchemy.html; while you're there you may find some of there atricles of interest (e.g. Death To Spam). In reference to this package making animated GIF's is very simple. Simply click File -> Animation Wizard and it will take you through all the options.

There's still point which needs clarifying at this point and that is transparency. This is used to make the image appear on top of what's already on the screen instead of having a an eyesore like this:


In order to make it transparent in reference to the GIF construction set then click the "Manage" button, you will see a block management button appear. Click the "Select All" button at the bottom left corner of this window, you will see the blocks become selected in grey. On the top right of this window is a "Control Blocks" section, make sure this is set to "Set all existing controls" and click apply, another window should appear. Tick the "Transparent colour" flag, select the dropper button to the right, which will allow you to select, from the image, the colour that you want to be transparent. Then set the "Remove by:" drop down menu to the "Background" option. Having done this, you should now have a animated GIF, with a transparent background ready to put on a webpage.



Including It On A Webpage
Now this must be the simplest part as it is the same as including any other image on your page. It is achieved using and image tag, which goes like this:

<img src="filename.gif" width="x" height="x">

The width and height attributes define how size of the image on the webpage, if you wish for the image to remain it's normal size then these values can be found by loading the image into the animation compiler. Should you wish for the image to be a different size then any numbers can be used and the browser will scale it for you, please note however that this will not change the filesize.

And you too can create images such as these:




For more information please email [email protected]